<template>
  <div class="searchBlock">
    <div class="w8 rb">
      <div class="row">
        <img src="@/assets/imgs/logo.png" width="100" />
        <div class="Sl title">校园二手书</div>
      </div>

      <div class="Sr fc">
        <div class="flex1 row">
          <el-input
            maxlength="10"
            placeholder="请输入书名"
            v-model="search"
            class="input-with-select"
            ><el-select
              v-model="SSelect"
              slot="prepend"
              placeholder="校园图书"
              class="el-select"
            >
              <el-option label="校园图书" value="1"></el-option>
              <el-option label="已购买" value="2"></el-option>
              <el-option label="已发布" value="3"></el-option>
              <el-option label="已收藏" value="4"></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              class="el-button"
              @click="toSearch()"
            ></el-button>
          </el-input>
          <div class="el-button2">
            高级搜索
            <div class="Hsearch">
              <template v-for="item in HSList">
                <div class="item rb">
                  <li class="Htext">{{ item.name }}</li>
                  <el-input
                    v-if="item.type == 'input'"
                    size="mini"
                    class="Hinput"
                    v-model="HSearchInfo[item.vm]"
                    placeholder=""
                  ></el-input>
                  <div v-else-if="item.type == 'twoinput'">
                    <template v-for="ite in item.vm">
                      <el-input
                        class="priceType"
                        size="mini"
                        v-model="HSearchInfo[ite]"
                        placeholder=""
                      ></el-input>
                    </template>
                  </div>
                  <div v-else-if="(item.type = 'select')" class="selects">
                    <select
                      class="Hinput selectType"
                      v-model="HSearchInfo[item.vm]"
                      placeholder=""
                    >
                      <option
                        class="option"
                        v-for="ite in bookType"
                        :key="ite.name"
                        :label="ite.name"
                        :value="ite.name"
                      ></option>
                    </select>
                  </div>
                </div>
              </template>
              <div class="center">
                <el-button type="success" class="">搜索</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="flex2 row">
          <template v-for="item in searchList">
            <li>{{ item }}</li>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      SSelect: "",
      searchList: ["热门", "最新", "清华出版社", "计算机"],
      HSList: [
        {
          name: "书名",
          type: "input",
          vm: "bookName",
        },
        {
          name: "作者",
          type: "input",
          vm: "author",
        },
        {
          name: "出版社",
          type: "input",
          vm: "publisher",
        },
        {
          name: "店铺/发布者",
          type: "input",
          vm: " issuer",
        },
        {
          name: "分类",
          type: "select",
          vm: "bookType",
        },
        {
          name: "价格",
          type: "twoinput",
          vm: ["Hprice", "Lprice"],
        },
        {
          name: "折损",
          type: "input",
          vm: "depreciation",
        },
        {
          name: "出版日期",
          type: "input",
          vm: "pubdate",
        },
      ],
      HSearchInfo: {
        bookName: "",
        author: "",
        publisher: "",
        issuer: "",
        bookTypeName: "",
        Hprice: "",
        Lprice: "",
        depreciation: "",
        pubdate: "",
      },
      bookType: [
        {
          name: "信息技术",
          url: "",
          code: "",
          more: [
            {
              name: "计算机",
              url: "",
              code: "",
            },
            {
              name: "电子信息",
              url: "",
              code: "",
            },
            {
              name: "网络",
              url: "",
              code: "",
            },
          ],
        },
        {
          name: "外国语",
          url: "",
          code: "",
          more: [
            {
              name: "英语",
              url: "",
              code: "",
            },
            {
              name: "日语",
              url: "",
              code: "",
            },
            {
              name: "鸟语",
              url: "",
              code: "",
            },
          ],
        },
        {
          name: "农学",
          url: "",
          code: "",
          more: [
            {
              name: "草",
              url: "",
              code: "",
            },
            {
              name: "花",
              url: "",
              code: "",
            },
            {
              name: "树",
              url: "",
              code: "",
            },
          ],
        },
        {
          name: "动科",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "理学",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "教育学",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "体育学",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "经济与管理",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "医学",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "传媒",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "材料",
          url: "",
          code: "",
          more: [],
        },
        {
          name: "其他",
          url: "",
          code: "",
          more: [],
        },
      ],
    };
  },
  methods: {
    toSearch() {
      this.HSearchInfo.bookName = this.search;
      this.$store.commit("HSearchInfo/setHSearchInfo", this.HSearchInfo);
      this.$router.push({
        // path: "/filter",
        name: "filter",
        // params: { HSearchInfo: this.HSearchInfo },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.searchBlock {
  background: lightgray;
  .title {
    font-family: "font1";
    font-size: 35px;
    line-height: 3;
  }
  .flex1 {
    margin-top: 20px;
    .input-with-select {
      background-color: #fff;
      .el-select {
        width: 120px;
      }
      .el-button {
        background-color: rgb(78, 64, 64);
        width: 50px;
      }
    }
    .el-button2 {
      position: relative;
      display: inline;
      text-align: left;
      margin-left: 12px;
      margin-top: 8px;
      width: 32px;
      // background: #000;
      color: rgb(104, 98, 98);
      font-size: 8px;
      .Hsearch {
        z-index: 99;
        display: none;
        position: absolute;
        top: 30px;
        padding: 20px;
        width: 300px;
        // height: 100px;
        background: rgb(184, 180, 180);
        font-size: 14px;
        transform: translateX(-270px);
        color: #000;
        .item {
          margin-top: 20px;
          margin-bottom: 20px;
          .Htext {
            margin-left: 20px;
            margin-top: 10px;
          }
          .Hinput {
            width: 150px;
            height: 20px;
          }
          .priceType {
            width: 50px;
            margin-right: 10px;
            position: relative;
          }

          .selects {
            position: relative;
            .selectType {
              line-height: 2;
              height: 30px;
            }
            .more {
              background: #000;
              z-index: 1000;
              position: absolute;
              top: 0;
              right: 100px;
            }
          }
          .priceType:first-child {
            margin-right: 30px;
          }
          .priceType:first-child::after {
            content: "";
            position: absolute;
            width: 8px;
            height: 2px;
            background: #000;
            top: 50%;
            right: -20px;
          }
        }
      }
    }
    .el-button2:hover {
      color: lightcoral;
      cursor: pointer;
      .Hsearch {
        display: block;
      }
    }
  }
  .flex2 {
    margin-top: 14px;
    li:not(:last-child) {
      margin-right: 20px;
    }
    li {
      color: lightslategray;
      font-size: 14px;
    }
    li:hover {
      color: black;
      cursor: pointer;
    }
  }
}
</style>